<!DOCTYPE html>
<html>
<head>
    <meta charset=UTF-8>
    <meta name=viewport content="width=device-width,initial-scale=1,user-scalable=0">
    <title>weui.js</title>
    <link rel=stylesheet href=https://res.wx.qq.com/open/libs/weui/1.1.1/weui.min.css>
    <style>
        body, html {
            height: 100%;
            background-color: #f8f8f8
        }

        body {
            font-family: -apple-system-font, Helvetica Neue, Helvetica, sans-serif
        }

        .item {
            padding: 10px 0
        }

        .item__title {
            margin-bottom: 5px;
            padding-left: 15px;
            padding-right: 15px;
            color: #999;
            font-weight: 400;
            font-size: 14px
        }

        .item__ctn {
            padding: 0 15px
        }

        .page_feedback {
            padding: 15px;
            overflow: auto;
            background-color: #FFF
        }

        label > * {
            pointer-events: none
        }

        .weui-picker__item {
            padding: 0;
            height: 34px;
            line-height: 34px
        }
    </style>
</head>
<body ontouchstart>
<p id=bear></p>
<div class=weui-tab id=tab>
    <div class=weui-navbar>
        <div class=weui-navbar__item>反馈</div>
        <div class=weui-navbar__item>表单</div>
        <div class=weui-navbar__item>上传</div>
        <div class=weui-navbar__item>其它</div>
    </div>
    <div class=weui-tab__panel>
        <div class="weui-tab__content page_feedback">
            <a href=javascript:; id=alertBtn class="weui-btn weui-btn_default">Alert</a>
            <a href=javascript:; id=confirmBtn class="weui-btn weui-btn_default">Confirm</a>
            <a href=javascript:; id=toastBtn class="weui-btn weui-btn_default">Toast</a>
            <a href=javascript:; id=loadingBtn class="weui-btn weui-btn_default">Loading</a>
            <a href=javascript:; id=actionSheetBtn class="weui-btn weui-btn_default">ActionSheet</a>
            <a href=javascript:; id=topTipsBtn class="weui-btn weui-btn_default">TopTips</a>
            <a href=javascript:; id=pickerBtn class="weui-btn weui-btn_default">Picker</a>
            <a href=javascript:; id=datePickerBtn class="weui-btn weui-btn_default">DatePicker</a>
            <a href=javascript:; id=multiPickerBtn class="weui-btn weui-btn_default">Multi-Picker</a>
            <a href=javascript:; id=cascadePickerBtn class="weui-btn weui-btn_default">Cascade-Picker</a>
        </div>
        <div class=weui-tab__content>
            <div id=form>
                <div class=weui-cells__title>性别</div>
                <div class="weui-cells weui-cells_radio">
                    <label class="weui-cell weui-check__label" for=r1>
                        <div class=weui-cell__bd>男</div>
                        <div class=weui-cell__ft>
                            <input required type=radio class=weui-check name=sex value=male id=r1 tips=请选择性别>
                            <span class=weui-icon-checked></span>
                        </div>
                    </label>
                    <label class="weui-cell weui-check__label" for=r2>
                        <div class=weui-cell__bd>女</div>
                        <div class=weui-cell__ft>
                            <input type=radio name=sex class=weui-check value=female id=r2>
                            <span class=weui-icon-checked></span>
                        </div>
                    </label>
                </div>
                <div class=weui-cells__title>编码助手(1-2个)</div>
                <div class="weui-cells weui-cells_checkbox">
                    <label class="weui-cell weui-check__label" for=c1>
                        <div class=weui-cell__hd>
                            <input required pattern={1,2} type=checkbox tips=请勾选1-2个敲码助手 class=weui-check
                                   name=assistance id=c1>
                            <i class=weui-icon-checked></i>
                        </div>
                        <div class=weui-cell__bd>黄药师</div>
                    </label>
                    <label class="weui-cell weui-check__label" for=c2>
                        <div class=weui-cell__hd>
                            <input type=checkbox name=assistance class=weui-check id=c2>
                            <i class=weui-icon-checked></i>
                        </div>
                        <div class=weui-cell__bd>欧阳锋</div>
                    </label>
                    <label class="weui-cell weui-check__label" for=c3>
                        <div class=weui-cell__hd>
                            <input type=checkbox name=assistance class=weui-check id=c3>
                            <i class=weui-icon-checked></i>
                        </div>
                        <div class=weui-cell__bd>段智兴</div>
                    </label>
                    <label class="weui-cell weui-check__label" for=c4>
                        <div class=weui-cell__hd>
                            <input type=checkbox name=assistance class=weui-check id=c4>
                            <i class=weui-icon-checked></i>
                        </div>
                        <div class=weui-cell__bd>洪七公</div>
                    </label>
                </div>
                <div class="weui-cells weui-cells_form">
                    <div class=weui-cell>
                        <div class=weui-cell__hd>
                            <label class=weui-label>手机号</label>
                        </div>
                        <div class=weui-cell__bd>
                            <input class=weui-input type=tel required pattern=^\d{11}$ maxlength=11
                                   placeholder=输入你现在的手机号 emptytips=请输入手机号 notmatchtips=请输入正确的手机号>
                        </div>
                        <div class=weui-cell__ft>
                            <i class=weui-icon-warn></i>
                        </div>
                    </div>
                    <div class=weui-cell>
                        <div class=weui-cell__hd>
                            <label class=weui-label>身份证号码</label>
                        </div>
                        <div class=weui-cell__bd>
                            <input class=weui-input type=text required pattern=REG_IDNUM maxlength=18
                                   placeholder=输入你的身份证号码 emptytips=请输入身份证号码 notmatchtips=请输入正确的身份证号码>
                        </div>
                        <div class=weui-cell__ft>
                            <i class=weui-icon-warn></i>
                        </div>
                    </div>
                    <div class="weui-cell weui-cell weui-cell_vcode">
                        <div class=weui-cell__hd>
                            <label class=weui-label>验证码</label>
                        </div>
                        <div class=weui-cell__bd>
                            <input class=weui-input maxlength=4 type=text required pattern=REG_VCODE placeholder=点击验证码更换
                                   tips=请输入验证码>
                        </div>
                        <div class=weui-cell__ft>
                            <i class=weui-icon-warn></i>
                            <img class=weui-vcode-img src=http://weui.github.io/weui/images/vcode.jpg>
                        </div>
                    </div>
                </div>
                <div class=weui-btn-area>
                    <a id=formSubmitBtn href=javascript: class="weui-btn weui-btn_primary">提交</a>
                </div>
            </div>
        </div>
        <div class=weui-tab__content>
            <p class=weui-cells__title>图片自动上传</p>
            <div class="weui-cells weui-cells_form" id=uploader>
                <div class=weui-cell>
                    <div class=weui-cell__bd>
                        <div class=weui-uploader>
                            <div class=weui-uploader__hd>
                                <p class=weui-uploader__title>图片上传</p>
                                <div class=weui-uploader__info>
                                    <span id=uploadCount>0</span>
                                    /5
                                </div>
                            </div>
                            <div class=weui-uploader__bd>
                                <ul class=weui-uploader__files id=uploaderFiles></ul>
                                <div class=weui-uploader__input-box>
                                    <input id=uploaderInput class=weui-uploader__input type=file accept=image/*
                                           capture=camera multiple=""/>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <p class=weui-cells__title>图片手动上传</p>
            <div class="weui-cells weui-cells_form" id=uploaderCustom>
                <div class=weui-cell>
                    <div class=weui-cell__bd>
                        <div class=weui-uploader>
                            <div class=weui-uploader__hd>
                                <p class=weui-uploader__title>图片上传</p>
                            </div>
                            <div class=weui-uploader__bd>
                                <ul class=weui-uploader__files id=uploaderCustomFiles></ul>
                                <div class=weui-uploader__input-box>
                                    <input id=uploaderCustomInput class=weui-uploader__input type=file accept=image/*
                                           multiple="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class=weui-btn-area>
                <a id=uploaderCustomBtn href=javascript: class="weui-btn weui-btn_primary">上传</a>
            </div>
        </div>
        <div class=weui-tab__content>
            <div class=item>
                <h4 class=item__title>搜索框</h4>
                <div class=weui-search-bar id=searchBar>
                    <form class=weui-search-bar__form>
                        <div class=weui-search-bar__box>
                            <i class=weui-icon-search></i>
                            <input type=search class=weui-search-bar__input placeholder=搜索 required="">
                            <a href=javascript: class=weui-icon-clear></a>
                        </div>
                        <label class=weui-search-bar__label>
                            <i class=weui-icon-search></i>
                            <span>搜索</span>
                        </label>
                    </form>
                    <a href=javascript: class=weui-search-bar__cancel-btn>取消</a>
                </div>
            </div>
            <div class=item>
                <h4 class=item__title>滑块</h4>
                <div class=item__ctn>
                    <div class=weui-slider-box>
                        <div id=slider class=weui-slider>
                            <div class=weui-slider__inner>
                                <div class=weui-slider__track></div>
                                <div class=weui-slider__handler></div>
                            </div>
                        </div>
                        <div id=sliderValue class=weui-slider-box__value></div>
                    </div>
                </div>
            </div>
            <div class=item>
                <h4 class=item__title>滑块(step=10)</h4>
                <div class=item__ctn>
                    <div class=weui-slider-box>
                        <div id=sliderStep class=weui-slider>
                            <div class=weui-slider__inner>
                                <div class=weui-slider__track></div>
                                <div class=weui-slider__handler></div>
                            </div>
                        </div>
                        <div id=sliderStepValue class=weui-slider-box__value></div>
                    </div>
                </div>
            </div>
            <div class=item>
                <h4 class=item__title>滑块(分3步)</h4>
                <div class=item__ctn>
                    <div class=weui-slider-box>
                        <div id=sliderBlock class=weui-slider>
                            <div class=weui-slider__inner>
                                <div class=weui-slider__track></div>
                                <div class=weui-slider__handler></div>
                            </div>
                        </div>
                        <div id=sliderBlockValue class=weui-slider-box__value></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="{{ url_for('static', filename='js/example.js') }}"></script>

</body>
</html>
